<template>
  <!-- 使用Element Plus的Dialog组件作为基础 -->
  <el-dialog
    v-model="showDialog"
    :title="plan?.planName"
    width="80%"
    class="plan-detail-dialog center-dialog"
    :destroy-on-close="true"
    append-to-body
    @close="handleClose"
  >
    <div v-if="plan" class="dialog-container">
      <!-- 顶部固定区域：状态和进度 -->
      <div class="dialog-header">
        <div class="header-left">
          <!-- 状态标签 -->
          <el-tag :type="getStatusTagType(plan.status)">
            {{ getStatusText(plan.status) }}
          </el-tag>
          <span class="create-time">
            <!-- 创建时间 -->
            创建于 {{ formatDate(plan.createTime) }}
          </span>
        </div>
        <!-- 进度条 -->
        <div class="progress-info">
          <span>完成进度</span>
          <el-progress
            :percentage="calculateProgress(plan)"
            :status="calculateProgress(plan) === 100 ? 'success' : ''"
            style="width: 200px; margin-left: 10px"
          />
        </div>
      </div>

      <!-- 可滚动内容区域 ：标签页切换-->
      <div class="scrollable-content">
        <!-- 使用标签页切换不同内容 -->
        <el-tabs v-model="activeTab" class="detail-tabs">
          <!-- 周计划标签页 -->
          <el-tab-pane label="学习周计划" name="weeks">
            <div class="week-list">
              <!-- 遍历每周的学习内容 -->
              <div
                v-for="(week, weekIndex) in plan.weeks"
                :key="weekIndex"
                class="week-item"
                :class="{ 'current-week': week.status === 'current' }"
              >
                <!-- 周标题区域 -->
                <div class="week-header">
                  <h4>第{{ week.week }}周: {{ week.title }}</h4>
                  <el-tag
                    :type="week.status === 'completed' ? 'success' : 'primary'"
                    size="small"
                  >
                    {{ week.status === "completed" ? "已完成" : "进行中" }}
                  </el-tag>
                </div>
                <!-- 周内容区域 -->
                <div class="week-content">
                  <div class="content-section">
                    <h5>学习内容</h5>
                    <ul class="task-list">
                      <!-- 每周的具体学习内容 -->
                      <li
                        v-for="(item, itemIndex) in week.content"
                        :key="itemIndex"
                        class="task-item"
                      >
                        <div class="task-content">
                          <!-- 复选框标记任务完成状态 -->
                          <el-checkbox
                            v-model="item.status"
                            @change="
                              () => handleTaskStatusChange(weekIndex, itemIndex)
                            "
                          >
                            <span
                              class="task-text"
                              :class="{ 'completed-task': item.status }"
                            >
                              {{ item.topic }}
                            </span>
                          </el-checkbox>
                        </div>
                        <!-- 显示计划完成时间 -->
                        <span v-if="item.status" class="completion-time">
                          {{
                            item.completion_time
                              ? formatTime(item.completion_time)
                              : "刚刚完成"
                          }}
                        </span>
                      </li>
                    </ul>
                  </div>
                  <div class="content-section">
                    <h5>练习任务</h5>
                    <p>{{ week.exercise }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 学习建议标签页 -->
          <el-tab-pane
            label="学习建议"
            name="advice"
            v-if="plan.advice?.length"
          >
            <div class="advice-list">
              <!-- 遍历学习建议 -->
              <div
                v-for="(item, index) in plan.advice"
                :key="index"
                class="advice-item"
              >
                <el-icon class="advice-icon">
                  <Pointer />
                </el-icon>
                <div class="advice-content">{{ item }}</div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 统计标签页 -->
          <el-tab-pane label="学习统计" name="stats">
            <div class="stats-container">
              <!-- 统计信息表格 -->
              <el-descriptions :column="2" border>
                <el-descriptions-item label="开始时间">
                  {{ formatDate(plan.createTime) }}
                </el-descriptions-item>
                <el-descriptions-item label="最后更新时间">
                  {{ formatDate(plan.updateTime) }}
                </el-descriptions-item>
                <el-descriptions-item label="已完成周数">
                  {{ getCompletedWeeksCount() }}
                </el-descriptions-item>
                <el-descriptions-item label="总周数">
                  {{ plan.weeks.length }}
                </el-descriptions-item>
                <el-descriptions-item label="已完成任务">
                  {{ getCompletedTasksCount() }}
                </el-descriptions-item>
                <el-descriptions-item label="总任务数">
                  {{ getTotalTasksCount() }}
                </el-descriptions-item>
              </el-descriptions>

              <!-- 进度图标 -->
              <div class="stats-chart">
                <el-progress
                  type="dashboard"
                  :percentage="calculateProgress(plan)"
                  :color="colors"
                />
                <div class="chart-label">总体进度</div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 底部固定按钮 -->
      <div class="dialog-footer">
        <el-button @click="showDialog = false">关闭</el-button>
        <el-button
          type="primary"
          @click="$emit('start-study', plan)"
          v-if="plan?.status !== 'completed'"
        >
          开始学习
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
// 导入Vue相关功能
import { ref, computed } from "vue";
// 导入Element Plus组件和图标
import { ElMessage } from "element-plus";
import { Pointer } from "@element-plus/icons-vue";
// 导入API方法
import { updatePlan } from "@/api/plan";

// 定义组件props
const props = defineProps({
  plan: {
    type: Object,
    required: true,
  },
  show: {
    type: Boolean,
    required: true,
  },
});

// 定义组件emits
const emit = defineEmits(["update:show", "start-study", "update-plan"]);

// 响应式数据
const activeTab = ref("weeks"); // 当前激活的标签页
// 进度条颜色配置
const colors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
];

// 计算属性：控制弹窗显示
const showDialog = computed({
  get() {
    return props.show;
  },
  set(value) {
    emit("update:show", value);
  },
});

// 弹窗关闭处理
const handleClose = () => {
  activeTab.value = "weeks"; // 重置为第一个标签页
  emit("update:show", false);
};

// 格式化日期显示
const formatDate = (dateStr: string) => {
  if (!dateStr) return "未设置";
  return new Date(dateStr).toLocaleDateString();
};

// 格式化时间显示
const formatTime = (dateStr: string) => {
  if (!dateStr) return "";
  return new Date(dateStr).toLocaleTimeString();
};

// 计算计划进度百分比
const calculateProgress = (plan: any) => {
  if (!plan.weeks) return 0;

  let totalTasks = 0;
  let completedTasks = 0;

  // 计算总任务数和已完成任务数
  plan.weeks.forEach((week: any) => {
    if (week.content) {
      totalTasks += week.content.length;
      completedTasks += week.content.filter((item: any) => item.status).length;
    }
  });

  return totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
};

// 获取状态标签的类型
const getStatusTagType = (status: string) => {
  switch (status) {
    case "active":
      return "primary";
    case "completed":
      return "success";
    default:
      return "info";
  }
};

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case "active":
      return "进行中";
    case "completed":
      return "已完成";
    default:
      return status;
  }
};

// 获取已完成周数
const getCompletedWeeksCount = () => {
  if (!props.plan?.weeks) return 0;
  return props.plan.weeks.filter((w: any) => w.status === "completed").length;
};

// 获取已完成任务数
const getCompletedTasksCount = () => {
  if (!props.plan?.weeks) return 0;
  let count = 0;
  props.plan.weeks.forEach((week: any) => {
    if (week.content) {
      count += week.content.filter((item: any) => item.status).length;
    }
  });
  return count;
};

// 获取总任务数
const getTotalTasksCount = () => {
  if (!props.plan?.weeks) return 0;
  let count = 0;
  props.plan.weeks.forEach((week: any) => {
    if (week.content) {
      count += week.content.length;
    }
  });
  return count;
};

// 处理任务状态变更
const handleTaskStatusChange = async (weekIndex: number, itemIndex: number) => {
  if (!props.plan) return;

  const week = props.plan.weeks[weekIndex];
  const item = week.content[itemIndex];

  // 如果任务被标记为完成，设置完成时间
  if (item.status) {
    item.completion_time = formatFullDateTime(new Date());
  } else {
    item.completion_time = null;
  }

  // 检查是否所有任务都完成
  const allCompleted = week.content.every((item: any) => item.status);
  week.status = allCompleted ? "completed" : "active";

  // 更新计划进度
  updatePlanProgress();
  // 保存到后端
  await savePlanToBackend();
};

// 格式化完整日期时间的方法
const formatFullDateTime = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 更新计划进度
const updatePlanProgress = () => {
  if (!props.plan) return;

  const totalTasks = getTotalTasksCount();
  const completedTasks = getCompletedTasksCount();

  // 计算新进度
  const newProgress = Math.round((completedTasks / totalTasks) * 100);
  props.plan.planProgress = newProgress;
  props.plan.updateTime = new Date().toISOString();

  // 如果进度100%，标记为已完成
  if (newProgress >= 100) {
    props.plan.status = "completed";
  }

  // 通知父组件计划已更新
  emit("update-plan", props.plan);
};

// 保存计划到后端
const savePlanToBackend = async () => {
  if (!props.plan) return;

  try {
    // 格式化日期为后端需要的格式
    const formatBackendDate = (dateStr: string) => {
      if (!dateStr) return "";
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
        .getHours()
        .toString()
        .padStart(2, "0")}:${date
        .getMinutes()
        .toString()
        .padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
    };

    // 调用API更新计划
    const response = await updatePlan({
      planId: props.plan.planId,
      planProgress: props.plan.planProgress,
      planContent: JSON.stringify({
        weeks: props.plan.weeks,
        advice: props.plan.advice,
      }),
      status: props.plan.status,
      updateTime: formatBackendDate(props.plan.updateTime),
      createTime: formatBackendDate(props.plan.createTime),
    });

    if (response.code !== 200) {
      throw new Error(response.msg || "更新计划失败");
    }

    ElMessage.success("计划已更新");
  } catch (error) {
    console.error("更新计划失败:", error);
    ElMessage.error("更新计划失败");
  }
};
</script>

<style scoped>
/* ==================== 弹窗基础样式 ==================== */
/* 1. 弹窗居中定位 - 使用flex确保弹窗在视口中居中 */
.center-dialog {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

/* 深度选择器覆盖Element UI默认弹窗样式 */
:deep(.center-dialog .el-dialog) {
  margin: 0 auto !important; /* 移除默认外边距 */
  position: fixed; /* 固定定位 */
  top: 50%; /* 从顶部50%位置开始 */
  left: 50%; /* 从左侧50%位置开始 */
  transform: translate(-50%, -50%); /* 通过位移实现精确居中 */
  max-height: 80vh; /* 最大高度为视口高度的80% */
  display: flex; /* 启用flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
}

/* ==================== 弹窗内容容器 ==================== */
.dialog-container {
  display: flex; /* flex布局 */
  flex-direction: column; /* 垂直排列 */
  height: 100%; /* 继承父元素高度 */
}

/* ==================== 顶部固定区域 ==================== */
.dialog-header {
  padding: 20px; /* 内边距 */
  border-bottom: 1px solid #ebeef5; /* 底部边框线 */
  flex-shrink: 0; /* 防止flex item收缩 */
  display: flex; /* flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  background: white; /* 白色背景 */
  z-index: 1; /* 确保在滚动内容上方 */
}

/* ==================== 可滚动内容区域 ==================== */
.scrollable-content {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 垂直方向溢出时滚动 */
  padding: 0 20px; /* 左右内边距 */
}

/* ==================== 底部按钮区域 ==================== */
.dialog-footer {
  padding: 16px 20px; /* 内边距 */
  border-top: 1px solid #ebeef5; /* 顶部边框线 */
  background: white; /* 白色背景 */
  flex-shrink: 0; /* 防止flex item收缩 */
  display: flex; /* flex布局 */
  justify-content: flex-end; /* 按钮右对齐 */
  gap: 12px; /* 按钮间距 */
  z-index: 1; /* 确保在滚动内容上方 */
}

/* ==================== 标签页样式 ==================== */
/* 深度选择器修改Element UI标签页样式 */
:deep(.detail-tabs) {
  flex: 1; /* 占据剩余空间 */
  display: flex; /* flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 标签页内容区域样式 */
:deep(.detail-tabs .el-tabs__content) {
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出内容 */
}

/* ==================== 周计划列表样式 ==================== */
.week-list {
  overflow-y: auto; /* 垂直方向溢出时滚动 */
  padding-right: 10px; /* 右侧内边距(为滚动条留空间) */
}

/* 单个周计划项样式 */
.week-item {
  margin-bottom: 20px; /* 底部外边距 */
  padding: 15px; /* 内边距 */
  border-radius: 8px; /* 圆角边框 */

  transition: all 0.3s; /* 所有属性变化时有0.3秒过渡 */
}

/* 当前周的特殊样式 */
.week-item.current-week {
  border-left: 4px solid #409eff; /* 左侧蓝色边框 */
  background-color: #ecf5ff; /* 浅蓝色背景 */
}

/* 周计划头部样式 */
.week-header {
  display: flex; /* flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 底部外边距 */
}

.week-header h4 {
  margin: 0; /* 移除默认外边距 */
  font-size: 16px; /* 字体大小 */
}

/* ==================== 周内容区域 ==================== */
.week-content {
  padding-left: 10px; /* 左侧内边距 */
}

/* 内容区块样式 */
.content-section {
  margin-bottom: 15px; /* 底部外边距 */
}

.content-section h5 {
  margin: 10px 0; /* 上下外边距 */
  color: #606266; /* 文字颜色 */
  font-size: 14px; /* 字体大小 */
}

.content-section p {
  margin: 5px 0; /* 上下外边距 */
  color: #606266; /* 文字颜色 */
}

/* ==================== 任务列表样式 ==================== */
.task-list {
  margin: 5px 0; /* 上下外边距 */
  padding-left: 0; /* 移除默认左内边距 */
  list-style: none; /* 移除列表标记 */
}

/* 单个任务项样式 */
.task-item {
  display: flex; /* flex布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 10px; /* 内边距 */
  margin-bottom: 8px; /* 底部外边距 */
  background: white; /* 白色背景 */
  border-radius: 4px; /* 圆角边框 */
  transition: all 0.3s; /* 所有属性变化时有0.3秒过渡 */
}

/* 任务项悬停效果 */
.task-item:hover {
}

/* 任务内容区域 */
.task-content {
  display: flex; /* flex布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px; /* 子元素间距 */
}

/* 任务文字样式 */
.task-text {
  color: #606266; /* 文字颜色 */
}

/* 已完成任务的文字样式 */
.task-text.completed-task {
  color: #909399; /* 灰色文字 */
  text-decoration: line-through; /* 删除线 */
}

/* 任务完成时间样式 */
.completion-time {
  font-size: 12px; /* 较小字体 */
  color: #909399; /* 灰色文字 */
  margin-left: 10px; /* 左侧外边距 */
}

/* ==================== 学习建议列表样式 ==================== */
.advice-list {
  padding: 10px; /* 内边距 */
}

/* 单个建议项样式 */
.advice-item {
  display: flex; /* flex布局 */
  align-items: flex-start; /* 顶部对齐 */
  margin-bottom: 15px; /* 底部外边距 */
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 圆角边框 */
}

/* 建议图标样式 */
.advice-icon {
  margin-right: 10px; /* 右侧外边距 */
  color: #409eff; /* 蓝色图标 */
}

/* 建议内容样式 */
.advice-content {
  flex: 1; /* 占据剩余空间 */
  color: #606266; /* 文字颜色 */
}

/* ==================== 统计区域样式 ==================== */
.stats-container {
  padding: 10px; /* 内边距 */
  display: flex; /* flex布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 统计表格样式 */
.stats-container .el-descriptions {
  margin-bottom: 20px; /* 底部外边距 */
}

/* 统计图表容器 */
.stats-chart {
  display: flex; /* flex布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  margin-top: 20px; /* 顶部外边距 */
}

/* 图表标签样式 */
.chart-label {
  margin-top: 10px; /* 顶部外边距 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 文字颜色 */
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
  /* 小屏幕下弹窗样式调整 */
  :deep(.center-dialog .el-dialog) {
    width: 95% !important; /* 宽度占据95% */
    max-height: 90vh; /* 最大高度调整 */
  }

  /* 头部区域调整为垂直布局 */
  .dialog-header {
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
    gap: 10px; /* 子元素间距 */
    padding: 15px; /* 调整内边距 */
  }

  /* 进度信息区域宽度调整 */
  .progress-info {
    width: 100%; /* 全宽 */
    margin-top: 10px; /* 顶部外边距 */
  }

  /* 可滚动内容区域调整 */
  .scrollable-content {
    padding: 0 15px; /* 调整内边距 */
    max-height: calc(90vh - 180px); /* 计算最大高度 */
  }

  /* 底部按钮区域调整 */
  .dialog-footer {
    padding: 12px 15px; /* 调整内边距 */
  }

  /* 统计表格单元格调整为块级元素 */
  .stats-container .el-descriptions-item__cell {
    display: block; /* 块级显示 */
    width: 100%; /* 全宽 */
  }
}
</style>
